<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Print Anonymization">
    <meta name="author" content="stephan escher">

    <title>Deda Toolkit</title>

    <!-- CSS Import-->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/dedastyle.css" rel="stylesheet">
    <link href="css/fontawesome.min.css" rel="stylesheet">
    <!-- EEL -->
    <script type='text/javascript' src='/eel.js'></script>

</head>

<body>
    <div id="wrapper" class="toggled">
        <!-- Sidebar -->
        <div id="sidebar-wrapper"></div>
        <!-- Page Content -->
        <div id="page-content-wrapper">
            <div class="container-fluid" id="content">
                <a href="#menu-toggle" id="menu-toggle"><i class="fas fa-ellipsis-h"></i></a><a class="language" href="de/printanon2.html"> Deutsch </a>
                <hr><h3> Print Anonymization <i class="fas fa-print"></i></h3><hr><br>
                <div class="card" id="contentheader">
                  <div class="card-body">
                      <form>
                          <b>1.</b> First <a href="printanon.html"><i class="fas fa-link"></i> generate a print mask</a>
                          for the specific printer you want to use. <br><br>
                          <b>2.</b>Load generated printer mask (.json) and the document (PDF) to generate an anonymous document.
                          This document is saved as "documentname_masked.pdf" in the same folder as the document.
                          Additional an settings file is saved as "calibration_masked.txt".
                          Print the anonymous document borderless and proceed to step 3.
                          <a tabindex="0" role="button" data-toggle="popover" data-trigger="focus" data-html="true" title="Copy file path"
                          data-content="<u>Windows</u><ul><li>Shift+right click on file</li><li>copy path</li><li>Strg+v in text field</ul></li>
                          <u>Linux</u><ul><li>Strg+c on file</li><li>Strg+v in text field</li></ul>"><i class="far fa-lightbulb"></i></i></a>
                          <br>
                          <div class="form-group" style="margin-top:20px;">
                                <input id='file_selector' class="form-control" placeholder='Type file path of the original document (*.pdf)'></input>
                                <input id='mask_selector' class="form-control" placeholder='Type file path of generated printer mask (*.json)'></input>
                                <div class="row form-row" >
                                    <a style="margin-left:5px;" href="#" class="btn btn-secondary" onclick='generateAnonPrintFile()'><i class="fas fa-cogs"></i> Generate Document</a>
                                    <div id="loading_div" style="margin-left:10px;margin-top:7px;"></div>
                                </div>
                          </div>
                          <br>
                         <b>3.</b> Scan artifacts can cause a small offset between the original and masked yellow dots. To fix this, scan the anonymized print and check the yellow dot patterns.
                         If there is an offset - vary x and y to overlay the masking points exactly with the original yellow points. Repeat step 2 with x and y set and click <i>Generate Document</i> again.
                         The dot radius describes the size of a tracking dot to be printed.
                          <div class="form-group">
                            <div class="form-row" style="margin:20px;">
                                <div class="col-md-4" style="max-width:300px;">
                                    <input id="x" step="0.01" type="number" class="form-control" placeholder='x offset'></input>
                                    <input id="y" step="0.01" type="number" class="form-control" placeholder='y offset'></input>
                                    <input id="dotradius" step="0.001" type="number" class="form-control" placeholder='radius (0.004in)'></input>
                                </div>
                                <div class="col-md-4" style="margin-left: 20px;">
                                    <img src="misc/x-y.png" style="max-height: 120px;"></img>
                                </div>
                          </div>
                      </div>
                    </form>
                  </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript Ext-->
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/deda.js"></script>

</body>

</html>
